<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main" style="height: 600px;"></div>

        <!-- 引入 ECharts 文件 -->
        <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>

        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '成绩展示',
                    textStyle: {
                        color:'red',
                    },
                    borderWidth:5,
                    borderColor:'yellow',
                    borderRadius:10,
                    left:'center',
                    top:'top',
                },
                tooltip: {
                        trigger: 'axis',
                        backgroundColor:'#fff',
                        boederColor:'#fff',
                        borderWidth:1,
                        triggerOn: 'click',//mousemove|click
                        textStyle: { // 文本样式
                            color: '#333', // 文本颜色
                            fontStyle: 'normal', // 字体风格
                            fontWeight: 'normal', // 字体粗细
                            fontFamily: 'sans-serif', // 字体类型
                            fontSize: 12 // 字体大小
                        },
                        formatter: function(params) {
                        // 格式化提示框内容
                        return params[0].name + ': ' + params[0].value;
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {
                            show: true,
                            title: '保存为图片',
                            iconStyle: {
                                // 正常状态下的样式
                                borderColor: '#ccc', // 边框颜色
                                borderWidth: 1, // 边框宽度
                                backgroundColor: '#fff' // 背景颜色
                            },
                            emphasis: {
                                // 高亮状态下的样式
                                iconStyle: {
                                    borderColor: '#aaa', // 高亮边框颜色
                                    borderWidth: 2, // 高亮边框宽度
                                    backgroundColor: '#eee' // 高亮背景颜色
                                }
                            }
                        },
                        dataView: {
                            show: true, // 是否显示数据视图工具
                            readOnly: false, // 是否只读，设为false可编辑数据
                            title: '数据视图', // 数据视图标题
                            // 可以通过 optionToContent 回调函数来自定义数据视图的显示内容
                            optionToContent: function (opt) {
                                var axisData = opt.xAxis[0].data;
                                var series = opt.series;
                                var table = '<table style="width:100%;text-align:center"><thead><tr>';
                                // 构建表头
                                table += '<td>名称</td>';
                                series.forEach(function (item) {
                                    table += '<td>' + item.name + '</td>';
                                });
                                table += '</tr></thead><tbody>';
                                // 构建表格内容
                                axisData.forEach(function (value, idx) {
                                    table += '<tr><td>' + value + '</td>';
                                    series.forEach(function (item) {
                                        table += '<td>' + item.data[idx] + '</td>';
                                    });
                                    table += '</tr>';
                                });
                                table += '</tbody></table>';
                                return table;
                            },
                            // 可以通过 lang 属性来自定义工具栏的提示信息
                            lang: ['数据视图', '关闭', '刷新']
                        },
                        restore: {
                            show: true, // 显示重置按钮
                            title: '重置', // 重置按钮的标题
                            iconStyle: {
                                // 正常状态下的样式
                                color: '#0f69c4', // 图标颜色
                                borderColor: '#ccc', // 边框颜色
                                borderWidth: 1, // 边框宽度
                                backgroundColor: 'rgba(255, 255, 255, 0.8)' // 背景颜色
                            },
                            emphasis: {
                                // 高亮状态下的样式（例如鼠标悬停时）
                                iconStyle: {
                                    color: '#0e62a8', // 高亮图标颜色
                                    borderColor: '#999', // 高亮边框颜色
                                    borderWidth: 2, // 高亮边框宽度
                                    backgroundColor: 'rgba(240, 240, 240, 0.8)' // 高亮背景颜色
                                }
                            }
                        },
                        dataZoom: {
                            show: true, // 显示数据区域缩放工具按钮
                            title: '区域缩放', // 工具按钮的标题
                            iconStyle: {
                                // 正常状态下的样式
                                borderColor: '#ccc', // 边框颜色
                                borderWidth: 1, // 边框宽度
                                backgroundColor: '#fff' // 背景颜色
                            },
                            emphasis: {
                                // 高亮状态下的样式（例如鼠标悬停时）
                                iconStyle: {
                                    borderColor: '#aaa', // 高亮边框颜色
                                    borderWidth: 2, // 高亮边框宽度
                                    backgroundColor: '#eee' // 高亮背景颜色
                                }
                            }
                        },
                        magicType: {
                            show: true, // 显示动态切换图表类型工具按钮
                            type: ['line', 'bar', 'stack', 'tiled'], // 可切换的图表类型
                            title: {
                                line: '折线图',
                                bar: '柱状图',
                                stack: '堆叠',
                                tiled: '平铺'
                            },
                            iconStyle: {
                                // 正常状态下的样式
                                color: '#0f69c4', // 图标颜色
                                borderColor: '#ccc', // 边框颜色
                                borderWidth: 1, // 边框宽度
                                backgroundColor: 'rgba(255, 255, 255, 0.8)' // 背景颜色
                            },
                            emphasis: {
                                // 高亮状态下的样式（例如鼠标悬停时）
                                iconStyle: {
                                    color: '#0e62a8', // 高亮图标颜色
                                    borderColor: '#999', // 高亮边框颜色
                                    borderWidth: 2, // 高亮边框宽度
                                    backgroundColor: 'rgba(240, 240, 240, 0.8)' // 高亮背景颜色
                                }
                            }
                        },
                        // 其他工具按钮的配置...
                    }
                },
                legend: {
                    type: 'plain', // 图例类型，默认为'plain'，当图例很多时可使用'scroll'
                    orient: 'horizontal', // 设置图例水平排列
                    x: 'center', // 设置图例水平居中
                    y: 'bottom', // 设置图例在底部
                    textStyle: {
                        color: '#333', // 设置图例文字颜色
                        fontSize: 12 // 设置图例文字字号
                    },
                    data:['语文','数学']
                },
                xAxis: {
                    data: ['张三','李四','王五','闰土','小明','茅台','二妞','大强']
                },
                yAxis: {},
                series: [
                    {
                        name: '语文',
                        type: 'bar',
                        data: [88,92,63,77,94,80,72,86]
                    },
                    {
                        name: '数学',
                        type: 'bar',
                        data: [93,60,61,62,85,79,92,30]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
</html>